import React, {Component, Fragment} from 'react';
import {
  CreateGlobal,
  LoginWrapper,
  LoginForm,
  LoginInputWrapper,
  LoginInputContent,
  LoginInput,
  LoginForget,
  BtnLogin,
  ToReg,
  Hr
} from './style';
import { Link } from 'react-router-dom';
// 引入react-redux模块， 用于connect接收Privider传递过来的state数据
import { connect } from 'react-redux';
import {
  actionCreators
} from './store'
import { Redirect } from "react-router-dom";
// 引入store
// import store from '../../store/index';

class Login extends Component{

  constructor(props) {
    super(props);
    // 将组件中的state与store绑定
    // this.state = store.getState();
    // store的变化要与组件联动，组件需要给注册监听store的变化，并通过回调更新组件的state
    // 注册监听store，store变化后调用组件的handleStoreChange方法更新组件的state
    // store.subscribe(this.handleStoreChange);
    this.state = {}
  };

  // handleInputChange = (e) => {
  //   const action = {
  //     type: 'change_input_value',
  //     value: e.target.value
  //   };
  //   store.dispatch(action);
  // };
  //
  // handleStoreChange = () => {
  //   this.setState(store.getState);
  // };

  render() {
    // console.log(this.props.inputValue);
    const { toLogin, login } = this.props;
    console.log(login);
    if (!login) {
      return (
        <Fragment>
          <CreateGlobal />
          <div className='main'>
            {/*<input type='text' value={this.props.inputValue} onChange={this.props.InputChang} />*/}
            <LoginWrapper>
              <LoginForm>
                <h2>登录--友享社区</h2>
                <LoginInputWrapper>
                  <LoginInputContent>
                    <LoginInput placeholder='输入手机号' type='text' ref={(input) => { this.account = input }} />
                  </LoginInputContent>
                </LoginInputWrapper>
                <LoginInputWrapper>
                  <LoginInputContent>
                    <LoginInput placeholder='输入密码' type='password' ref={(input) => { this.password = input }} />
                    <LoginForget>忘记密码</LoginForget>
                  </LoginInputContent>
                </LoginInputWrapper>
                <LoginInputWrapper className='mg40'>
                  <BtnLogin className='btnGreen' type='button'
                            onClick={ () => { toLogin(this.account, this.password) } }
                  >登录</BtnLogin>
                  <Link to = '/Reg'>
                    <ToReg className='fr'>还没有账号? 去注册 -></ToReg>
                  </Link>
                </LoginInputWrapper>
                {/*下划线 Hr组件*/}
                <Hr />
              </LoginForm>
            </LoginWrapper>
          </div>
        </Fragment>
      );
    } else {
      return (
      <div>
        { alert('您正处于登录状态') }
        <Redirect to='/' />
      </div>
      )
    }
  }
}

const mapStateToProps = (state) => ({
  inputValue: state.login.inputValue,
  login: state.login.login
});


const mapDispatchToProps= (dispatch) => ({
  // InputChang(e){
  //   dispatch(actionCreators.handleInputChange(e));
  // },
  toLogin(accountElem, passwordEle) {
    dispatch(actionCreators.login(accountElem.value, passwordEle.value));
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(Login);